<template>
    <div>
        <!-- 商品列表区域 -->
        <div class="goods-list">
            <router-link tag="div" class="goods-item" v-for="(item,index) in goodslist" :key="index" :to="'/home/goodsinfo/ '+ item.id">
                <img :src="item.img_url" alt="">
                <h1 class="title">{{item.title}}</h1>
                <div class="info">
                    <p class="price">
                        <span class="price1">￥{{item.market_price}}</span>
                        <span class="price2">￥{{item.sell_price}}</span>
                    </p>
                    <p class="number">
                        <span class="number1">热卖中</span>
                        <span class="number2">剩{{item.stock_quantity}}件</span>
                    </p>
                </div>
            </router-link>
            <!-- 加载更多 -->
            <mt-button @click="getMore" type="danger" size="large" style="margin-top:10px; padding-bottom: 70px ">加载更多</mt-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            page: 0,
            goodslist:[],
            isloaded: false // 节流阀
        }
    },
    methods: {
        async getGoodsListByPage(){
            const {data} = await this.$http.get("/api/getgoods?pageindex=" + this.page)
            if(data.status === 0){
                //  当获取到的数组长度为0，说明没有新数据了
                if(data.message.length <= 0){
                    // 设置isloaded true ,表示没有数据更新
                    this.isloaded = true
                }
                this.goodslist = this.goodslist.concat(data.message)
            }
        },
        getMore(){
            // 如果为true，表示数据已经加载完毕，此时节流阀返回
            if(this.isloaded) return
            // 点击加载更多商品
            this.page++
            this.getGoodsListByPage()
        }
    },
    created() {
        this.getGoodsListByPage()
    },
}
</script>

<style lang="scss">
    .goods-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 7px;
        .goods-item{
            width: 49%;
            border: 1px solid #fff;
            box-shadow: 0 0 7px #ccc;
            padding: 2px;
            display: flex;
            flex-direction: column;  //设置 <div> 元素内弹性盒元素的方向为相反的顺序  column设置项目为竖直显示
            justify-content: space-between;
            img{
                width: 100%;
            }
            .title{
                font-size: 18px;
            }
            .info{
                background-color: rgb(197, 195, 195);
                opacity: 0.5;
                .price{
                    .price1{
                        color: rgb(245, 0, 0);
                        font-size: 16px;
                        font-weight: 700;
                    }
                    .price2{
                        font-weight: 300;
                        color: rgb(39, 38, 38);
                    }
                }
                .number{
                    display: flex;
                    justify-content: space-between;
                    padding: 3px;
                    color: rgb(39, 38, 38);
                }
            }
        }
    }
</style>